import React, { useEffect, useState } from "react";
import {roleGet,userReg} from '../../api/user'
import {
  Form,
  Input,
  Button,
  Select,
} from "antd";
const { Option } = Select;

const UserManager = () => {
  const [rolelist,setRoleList] = useState([])
  useEffect(()=>{
    roleGet().then(res=>{
      setRoleList(res.data.results)
    })
  },[])
  const handleFinish = (values)=>{
    console.log(values);
    // rolePost(values)
    userReg(values)
  }
  return (
    <>
      <Form
        labelCol={{
          span: 4,
        }}
        wrapperCol={{
          span: 18,
        }}
        layout="horizontal"
        onFinish={handleFinish}
      >
        <Form.Item
          label="账号"
          name="username"
          rules={[{ required: true,message:"请输入账号名称"}]}
        >
          <Input/>
        </Form.Item>
        <Form.Item
          label="密码"
          name="password"
          rules={[{ required: true,message:"请输入密码"}]}
        >
          <Input />
        </Form.Item>
        <Form.Item
          label="角色"
          name="role"
          rules={[{ required: true,message:"请选择角色"}]}
        >
          <Select>
            {
              rolelist.map(item=>{
                return <Option key={item.objectId} value={item.rolecode}>
                  {item.rolename}
                </Option>
              })
            }
          </Select>
        </Form.Item>
        
        <Form.Item
          wrapperCol={{
            offset: 8,
            span: 16,
          }}
        >
          <Button type="primary" htmlType="submit">
            确认
          </Button>
        </Form.Item>
      </Form>
    </>
  );
};

export default UserManager;
